import React from 'react'
import { clsx } from 'clsx'
import { AnimatedLoadingIcon } from './Icon'

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'accent'
  size?: 'sm' | 'md' | 'lg'
  loading?: boolean
  leftIcon?: React.ReactNode
  rightIcon?: React.ReactNode
  fullWidth?: boolean
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  loading = false,
  leftIcon,
  rightIcon,
  fullWidth = false,
  disabled,
  children,
  className = '',
  ...props
}) => {
  const baseClasses = `
    inline-flex items-center justify-center font-medium rounded-lg
    transition-all duration-200 ease-out
    focus:outline-none focus:ring-2 focus:ring-offset-2
    disabled:opacity-50 disabled:cursor-not-allowed
    transform-gpu
    ${fullWidth ? 'w-full' : ''}
  `

  const variantClasses = {
    primary: `
      bg-neutral-900 hover:bg-neutral-800
      active:bg-neutral-700
      text-white shadow-sm hover:shadow-md
      focus:ring-neutral-600 hover:scale-[1.01]
      active:scale-[0.99]
    `,
    secondary: `
      bg-white border border-neutral-200
      hover:border-neutral-300 hover:bg-neutral-50
      active:bg-neutral-100
      text-neutral-700 shadow-sm
      focus:ring-accent-500 hover:scale-[1.005]
      active:scale-[0.995]
    `,
    ghost: `
      bg-transparent hover:bg-neutral-100
      active:bg-neutral-200
      text-neutral-600 hover:text-neutral-900
      focus:ring-accent-500
    `,
    danger: `
      bg-red-500 hover:bg-red-600
      active:bg-red-700
      text-white shadow-sm hover:shadow-md
      focus:ring-red-500 hover:scale-[1.01]
      active:scale-[0.99]
    `,
    accent: `
      bg-accent-500 hover:bg-accent-600
      active:bg-accent-700
      text-white shadow-sm hover:shadow-md
      focus:ring-accent-500 hover:scale-[1.01]
      active:scale-[0.99]
    `
  }

  const sizeClasses = {
    sm: 'px-3 py-1.5 text-sm gap-1.5',
    md: 'px-4 py-2 text-base gap-2',
    lg: 'px-6 py-3 text-lg gap-2.5'
  }

  return (
    <button
      className={clsx(
        baseClasses,
        variantClasses[variant],
        sizeClasses[size],
        className
      )}
      disabled={disabled || loading}
      {...props}
    >
      {loading ? (
        <>
          <AnimatedLoadingIcon size="sm" />
          <span>处理中...</span>
        </>
      ) : (
        <>
          {leftIcon && <span className="flex-shrink-0">{leftIcon}</span>}
          {children}
          {rightIcon && <span className="flex-shrink-0">{rightIcon}</span>}
        </>
      )}
    </button>
  )
}

// 图标按钮组件
export const IconButton: React.FC<ButtonProps & { icon: React.ReactNode; tooltip?: string }> = ({
  icon,
  tooltip,
  size = 'md',
  variant = 'ghost',
  className = '',
  ...props
}) => {
  const sizeClasses = {
    sm: 'w-8 h-8 p-1.5',
    md: 'w-10 h-10 p-2',
    lg: 'w-12 h-12 p-2.5'
  }

  return (
    <Button
      variant={variant}
      className={clsx(
        'rounded-full',
        sizeClasses[size],
        className
      )}
      title={tooltip}
      {...props}
    >
      {icon}
    </Button>
  )
}